<template>
  <div class="index">
    <!-- 标签栏 -->
    <div class="label">
      <div class="labelItem" v-for="(item, index) in labelItem" :key="index">
        <el-tag type="info" :closable="isEditor"
          :disable-transitions="false"
          @close="handleClose(item)" @click="handleTagClick(index)" 
          :class="{chooseTagStyle: chooseTagIndex === index}">{{item}}</el-tag>
      </div>
      <!-- 添加标签 -->
      <div class="el-input" v-show="isEditor">
        <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter="handleInputConfirm"
        @blur="handleInputConfirm"
        style="width:100%"
        >
        </el-input>
        <el-button v-else class="button-new-tag" style="width:100%" size="small" @click="showInput">新标签</el-button>
      </div>
      <!-- 可编辑状态 -->
      <div class="isEditor" @click="editorClick">
        <el-tag type="success" v-if="!isEditor">编辑</el-tag>
        <el-tag type="success" v-else>完成</el-tag>
      </div>
    </div>
    
      
    
    <!-- 备注栏 -->
    <div class="remark">
      <div class="content">备注</div>
      <input type="text" v-model="remarkValue" placeholder="在这里添加备注">
    </div>

    <!-- 收入与支出类型 -->
    <div class="valueType">
      <div class="typeItem" :class="{moneyTypeActive: moneyType === 1}" @click="changeTypeNav(1)">支出</div>
      <div class="typeItem" :class="{moneyTypeActive: moneyType === 2}" @click="changeTypeNav(2)">收入</div>
    </div>

    <!-- 收入与支出金额 -->
    <input class="inputValue" v-model="moneyInputValue">
    <!-- 键盘栏 -->

    <div class="keyboard">
      <div class="left">
        <div class="leftItem" v-for="(item, index) in leftKeyValue" :key="index"
        @click="handleLeftKeyClick(index)"
        :class="{keyboardClickStyle: (keyboardLeftIndex===index && keyboardLeftClick)}">{{item}}</div>
      </div>
      <div class="right" >
        <div class="rightItem" v-for="(item, index) in rightKeyValue" :key="index"
        @click="handleRightKeyClick(index)"
        :class="{keyboardClickStyle: (keyboardRightIndex===index && keyboardRightClick)}">{{item}}</div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <tab-bar></tab-bar>
  </div>
</template>

<script scoped>
import TabBar from '../components/tabBar/tabBar.vue'
import { ElMessage } from 'element-plus';

export default {
  name: 'Index',
  data() {
    return {
      // 标签的值
      labelItem: ['衣','食','住','行','兼职','旅游'],

      // 键盘的值
      leftKeyValue: ['1','2','3','+','4','5','6','-','7','8','9','×','0','.','%','+'],
      rightKeyValue: ['删除', '清空', 'OK'],

      // 选择支出还是收入
      moneyType: 1,

      

      inputVisible: false,
      inputValue: '',

      isEditor: false,

      keyboardLeftClick: false,
      keyboardLeftIndex: 0,

      keyboardRightClick: false,
      keyboardRightIndex: 0,

      // 选定的方式，输入的备注，支出或收入，输入金额
      chooseTagIndex: 0,

      isExpend: '',
      chooseTag: '',
      remarkValue: '',
      moneyInputValue: '',
      nowTime: []
    }
  },
  components: {
    TabBar
  },

  created() {
    this.handleTagClick(0)
    this.changeTypeNav(1)
  },
  methods: {
    // 支出还是收入方式
    changeTypeNav(index) {
      this.moneyType = index
      this.isExpend = index === 1 ? '支出' : '收入'
    },

    editorClick() {
      this.isEditor = !this.isEditor
    },

    handleClose(item) {
      this.labelItem.splice(this.labelItem.indexOf(item), 1);
    },

    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.labelItem.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    // 选择指定收入或支出方式
    handleTagClick(index) {
      this.chooseTagIndex = index
      this.chooseTag = this.labelItem[index]
    },

    // 键盘点击事件
    handleLeftKeyClick(index) {
      this.keyboardLeftIndex = index
      this.moneyInputValue += this.leftKeyValue[index]
      this.keyboardLeftClick = true
      setTimeout(() => {
        this.keyboardLeftClick = false
      }, 200);
    },

    handleRightKeyClick(index) {
      this.keyboardRightIndex = index
      this.keyboardRightClick = true
      if(index === 0) {
        this.moneyInputValue = this.moneyInputValue.slice(0,this.moneyInputValue.length-1)
      } else if (index === 1) {
        this.moneyInputValue = ''
      } else if (index === 2) {
        var reg = /^[0-9]+\.?[0-9]*$/;
        if(!reg.test(this.moneyInputValue)) {
          ElMessage.warning({
            message: '请输入正确的数字格式',
            type: 'warning',
            center: true
          });
          this.moneyInputValue = ''
        } else {
          let time = new Date()
          time = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
          this.nowTime = time.split(" ")
          var obj = {
            chooseTag: this.chooseTag,
            remarkValue: this.remarkValue,
            moneyInputValue: this.moneyInputValue,
            nowTime: this.nowTime
          }
          var stroageData = JSON.parse(localStorage.getItem("keepAccountData")) || []
          var isExpend = stroageData[0] || []
          var isIncome = stroageData[1] || []
          if(this.isExpend == "支出") {
            isExpend.unshift(obj)
          } else {
            isIncome.unshift(obj)
          }
          stroageData[0] = isExpend
          stroageData[1] = isIncome
          localStorage.setItem("keepAccountData", JSON.stringify(stroageData))
          ElMessage.success({
            message: '记账成功',
            type: 'success',
            center: true
          });

          this.chooseTag = '衣',
          this.remarkValue = "",
          this.moneyInputValue = ""
        }
      }
      setTimeout(() => {
        this.keyboardRightClick = false
      }, 200);
    }
  }
}
</script>

<style lang="scss" scoped>
  .keyboard{
    display: flex;
    position: absolute;
    bottom: 8vh;
    right: 0;
    left: 0;
    height: 32vh;
    background-color: #eee;
    padding-top: 1vh;
  }
  .left {
    flex: 4;
    display: flex;
    flex-wrap: wrap;
    
  }
  .leftItem{
    height: 7.5vh;
    width: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #ccc;
    margin: 0 2px;
  }
  .right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }
  .rightItem{
    width: 100%;
    height: 7.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #ccc;
  }
  .rightItem:last-child {
    height: 15vh;
  }

  .inputValue{
    width: 95%;
    height: 10vh;
    position: absolute;
    bottom: 41vh;
    right: 0;
    left: 0;
    font-size: 20px;
    border:none;
    text-align: right;
  }

  .valueType {
    width: 100%;
    height: 8vh;
    background-color: #bbb;
    position: absolute;
    bottom: 51vh;
    right: 0;
    left: 0;
    display: flex;
  }
  .typeItem{
    flex: 1;
    display: flex;
    justify-content: center;
    line-height: 8vh;
    font-weight: 600;
  }
  .moneyTypeActive{
    border-bottom: 2px solid #000;
  }
  .remark {
    display: flex;
    height: 8vh;
    background-color: #eee;
    position: absolute;
    bottom: 59vh;
    right: 0;
    left: 0;
  }
  .content {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .remark input{
    flex: 8;
    border:none;
    background-color: #eee;
  }

  .label{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    bottom: 68vh;
    right: 0;
    left: 0;
  }

  .labelItem,
  .el-input,
  .el-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
    margin: 5px;
  }

  .isEditor {
    position: absolute;
    top: -6vh;
    left: 2vh;
  }

  .chooseTagStyle{
    background-color: skyblue;
  }

  .keyboardClickStyle {
    background-color: #eee;
  }
</style>